---
title: "Card"
description: "Card is a container for text, photos, and actions in the context of a single subject."
---

import {cardContent} from "@/content/components/card";

# Card

Card is a container for text, photos, and actions in the context of a single subject.

<ComponentLinks component="card" />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add card",
    npm: "npm install @heroui/card",
    yarn: "yarn add @heroui/card",
    pnpm: "pnpm add @heroui/card",
    bun: "bun add @heroui/card"
  }}
/>


## Import

HeroUI exports 4 card-related components:

- **Card**: The main component to display a card.
- **CardHeader**: Commonly used for the title of a card.
- **CardBody**: The content of the card.
- **CardFooter**: Commonly used for actions.

<ImportTabs
  commands={{
    main: 'import {Card, CardHeader, CardBody, CardFooter} from "@heroui/react";',
    individual: 'import {Card, CardHeader, CardBody, CardFooter} from "@heroui/card";',
  }}
/>

## Usage

<CodeDemo isPreviewCentered title="Usage" files={cardContent.usage} />

### With Divider

<CodeDemo isPreviewCentered title="With Divider" files={cardContent.divider} />

> See the [Divider](/docs/components/divider) component for more details.

### With Image

<CodeDemo isPreviewCentered title="With Image" files={cardContent.image} />

### Blurred Footer

You can pass the `isFooterBlurred` prop to the card to blur the footer.

<CodeDemo isPreviewCentered title="Blurred Footer" files={cardContent.blurredFooter} />

### Composition

You can use other HeroUI components inside the card to compose a more complex card.

<CodeDemo isPreviewCentered title="Composition" files={cardContent.composition} />

### Blurred Card

You can pass the `isBlurred` prop to the card to blur the card. Card gets blurred properties based on its ancestor element.

> **Note**: To achieve the blur effect as seen in the preview, you need to provide a suitable background (e.g., `bg-linear-to-tr from-[#FFB457] to-[#FF705B]`) to an ancestor element of the Card component allowing the Card's blur effect to be visible.

<CodeDemo isGradientBox title="Blurred Card" files={cardContent.blurred} />

### Primary Action

If you pass the `isPressable` prop to the card, it will be rendered as a button.

<CodeDemo title="Primary Action" files={cardContent.primaryAction} />

> **Note**: that the used callback function is `onPress` instead of `onClick`. Please see the [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html#usepress) component for more details.

### Cover Image

You can use `Image` component as the cover of the card by taking it out of the `CardBody` component.

<CodeDemo title="Cover Image" files={cardContent.coverImage} />

<Spacer y={4} />

## Slots

- **base**:
  The main container of the card, where the header, body, and footer are placed.
- **header**:
  The header of the card, usually used for the title.
- **body**:
  The body of the card, where the main content is placed.
- **footer**:
  The footer of the card, usually used for actions.

<Spacer y={4} />

## Data Attributes

`Card` has the following attributes on the `base` element:

- **data-hover**:
  When the card is being hovered. Based on [useHover](https://react-spectrum.adobe.com/react-aria/useHover.html)
- **data-focus**:
  When the card is being focused. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
- **data-focus-visible**:
  When the card is being focused with the keyboard. Based on [useFocusRing](https://react-spectrum.adobe.com/react-aria/useFocusRing.html).
- **data-disabled**:
  When the card is disabled. Based on `isDisabled` prop.
- **data-pressed**:
  When the card is pressed. Based on [usePress](https://react-spectrum.adobe.com/react-aria/usePress.html)

<Spacer y={4} />

## API

### Card Props

<APITable
  data={[
    {
      attribute: "children",
      type: "ReactNode | ReactNode[]",
      description: "Usually the Card parts, `CardHeader`, `CardBody` and `CardFooter`.",
      default: "-"
    },
    {
      attribute: "shadow",
      type: "none | sm | md | lg",
      description: "The card shadow.",
      default: "md"
    },
    {
      attribute: "radius",
      type: "none | sm | md | lg",
      description: "The card border radius.",
      default: "lg"
    },
    {
      attribute: "fullWidth",
      type: "boolean",
      description: "Whether the card should take the full width of its parent.",
      default: "false"
    },
    {
      attribute: "isHoverable",
      type: "boolean",
      description: "Whether the card should change the background on hover.",
      default: "false"
    },
    {
      attribute: "isPressable",
      type: "boolean",
      description: "Whether the card should allow to be pressed.",
      default: "false"
    },
    {
      attribute: "isBlurred",
      type: "boolean",
      description: "Whether the card background should be blurred.",
      default: "false"
    },
    {
      attribute: "isFooterBlurred",
      type: "boolean",
      description: "Whether the card footer background should be blurred.",
      default: "false"
    },
    {
      attribute: "isDisabled",
      type: "boolean",
      description: "Whether the card should be disabled. The press events will be ignored.",
      default: "false"
    },
    {
      attribute: "disableAnimation",
      type: "boolean",
      description: "Whether to disable the animation.",
      default: "false"
    },
    {
      attribute: "disableRipple",
      type: "boolean",
      description: "Whether to disable ripple effect. Only when `isPressable` is true.",
      default: "false"
    },
    {
      attribute: "allowTextSelectionOnPress",
      type: "boolean",
      description: "Whether to allow text selection on pressing. Only when `isPressable` is true.",
      default: "false"
    },
    {
      attribute: "classNames",
      type: "Partial<Record<'base' | 'header' | 'body' | 'footer', string>>",
      description: "Allows to set custom class names for the card slots.",
      default: "-"
    }
  ]}
/>

### Card Events

<APITable
  data={[
    {
      attribute: "onPress",
      type: "(e: PressEvent) => void",
      description: "Handler that is called when the press is released over the target.",
      default: "-"
    },
    {
      attribute: "onPressStart",
      type: "(e: PressEvent) => void",
      description: "Handler that is called when a press interaction starts.",
      default: "-"
    },
    {
      attribute: "onPressEnd",
      type: "(e: PressEvent) => void",
      description: "Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.",
      default: "-"
    },
    {
      attribute: "onPressChange",
      type: "(isPressed: boolean) => void",
      description: "Handler that is called when the press state changes.",
      default: "-"
    },
    {
      attribute: "onPressUp",
      type: "(e: PressEvent) => void",
      description: "Handler that is called when a press is released over the target, regardless of whether it started on the target or not.",
      default: "-"
    }
  ]}
/>
